<template>
	<view class="search-box">
		<input style="width: 100%;" :style="{color: color}" @focus="getfocus" v-model="content" @input="ipt"  placeholder="请输入"/>
		<scroll-view  v-show="show" class="list" :style="{height:height}" scroll-y="true" @scrolltolower="refresh">
			<view class="list-item"  v-for="(item,i) in list" :key="i" @click="clickrow(item)">{{item[title]}}</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		name:"searchselect",
		props:{
			list:{
				type:Array,
				default:[]
			},
			height:{
				type:String,
				default:'200px'
			},
			title:{
				type:String,
				default:'goodsId'
			},
			times:{
				default:300,
				type:Number
			},
			color:{
				default:'#BEC6D2',
				type:String
			}
		},
		data() {
			return {
				// finished:false,
				// loading: false,
				show: false,
				content:''
			}
		},
		methods: {
			 //防抖
			debounce(fn,time){
			  this.timeOut && clearTimeout(this.timeOut)
			  this.timeOut = setTimeout(()=>{
				this.timeOut = null
				fn()
			  },time)
			},
			editContent(text){
				this.content = text
			},
			getfocus(){
				this.show=true
				this.$emit('getfocus')
			},
			ipt(e){
				this.debounce(()=>{
					this.$emit('ipt',e.detail.value)
				},this.times)
			},
			scroll(){
				this.$emit('touchout')
			},
			refresh(){
				this.$emit('refresh')
			},
			clickrow(e){
				this.$emit('clickrow',e)
				this.show=false
			}
		}
	}
</script>

<style lang="scss" scoped>
	.search-box{
		width: 100%;
		display: flex;
		position: relative;
	}
	.list{
		overflow-y: auto;
		background-color: white;
		position: absolute;
		height: 500px;
		width: 100%;
		top: 30px;
		z-index: 9;
		.list-item{
			line-height: 50rpx;
			margin: 0 10rpx;
		}
	}

</style>
